<template>
  <div>
    <div class="my-body">
      <div class="ipt_a">
        <div style="float: left; line-height: 30px"  class="tab_font-size">换货方：</div>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
      </div>

      <div class="ipt_b">
        <div style="float: left; line-height: 30px"  class="tab_font-size">下单日期：</div>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div style=" float: left">
        <div class="ipt_a">
          <div style="float: left; line-height: 30px"  class="tab_font-size">医院地区：</div>
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 130px; height: 50px; float: left"
          ></el-input>
        </div>
        <div class="ipt_a">
          <div style="float: left; line-height: 30px"  class="tab_font-size">换货状态：</div>
          <el-select v-model="form.regionb" placeholder="" style="width: 130px">
            <el-option label="全部" value="0"></el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="审核通过" value="2"></el-option>
          </el-select>
        </div>
        <div class="ipt_a">
          <div style="float: left; line-height: 30px"  class="tab_font-size">类型：</div>
          <el-select v-model="form.regionb" placeholder="" style="width: 130px">
            <el-option label="全部" value="0"></el-option>
            <el-option label="产品近效期" value="1"></el-option>
            <el-option label="投诉" value="2"></el-option>
            <el-option label="保障" value="2"></el-option>
          </el-select>
        </div>
        <el-button type="primary" plain>查询</el-button>
      </div>

      <div>
        <div style="margin-top: 30px; width: 100%; float: left">
          <div style="width: 100%; float: left">
            <template>
              <el-table
                :data="
                  tableData.slice(
                    (currentPage - 1) * pageSize,
                    currentPage * pageSize
                  )
                "
                style="width: 100%"
                border
               :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column fixed prop="bianhao" label="申请编号">
                </el-table-column>

                <el-table-column prop="enddate" label="类型"> </el-table-column>
                <el-table-column prop="name" label="换货方"> </el-table-column>

                <el-table-column prop="senddate" label="日期">
                </el-table-column>
                <el-table-column prop="senddate" label="订货状态">
                  <el-button>创库审核中</el-button>
                </el-table-column>
                <el-table-column prop="senddate" label="医院或地区">
                </el-table-column>
                <el-table-column prop="senddate" label="收货人">
                </el-table-column>
                <el-table-column prop="senddate" label="收货人电话">
                </el-table-column>
                <el-table-column prop="senddate" label="收货人地址">
                </el-table-column>
                <el-table-column prop="senddate" label="备注">
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10]"
                :page-size="pageSize"
                :total="tableData.length"
                layout="total, sizes, prev, pager, next, jumper"
              >
              </el-pagination>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="my-body">
      <div>
        <el-button type="primary" plain>经销换货单</el-button>
        当前换货申请信息:换货申请编号【DH000902232409291001】类型【 产品近效期】
        换货方【华中科技大学同济医学院附属协和医院(0009)】
      </div>
      <div style="width: 100%; float: left">
        <template>
          <el-table
            :data="
              tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            style="width: 100%"
            border
           :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column fixed prop="bianhao" label="产品系列">
            </el-table-column>

            <el-table-column prop="enddate" label="产品类型"> </el-table-column>
            <el-table-column prop="name" label="产品规格"> </el-table-column>

            <el-table-column prop="senddate" label="数量"> </el-table-column>
            <el-table-column prop="senddate" label="换货型号规格">
            </el-table-column>
            <el-table-column prop="senddate" label="换货序列号">
            </el-table-column>
            <el-table-column prop="senddate" label="换货数量">
            </el-table-column>
            <el-table-column prop="senddate" label="备注"> </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10]"
            :page-size="pageSize"
            :total="tableData.length"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      valuesj: 2024,
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "已签收",
        },
        {
          value: "3",
          label: "未签收",
        },
      ],
      data: [
        {
          label: "中国大陆",
          children: [
            {
              label: "上海",
            },
            {
              label: "北京",
            },
            {
              label: "四川",
            },
          ],
        },
      ],
      value1: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      value: "",
      chanpingguige: false,
      dialogVisible: false,
      dialogVisiblea: false,
      hospital: false,
      area: false,
      currentPage: 1,
      pageSize: 5,
      jinxiaoshang: false,
      shouhuor: false,
      diquxuanzhe: false,
      tableData: [
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
      ],
      form: {
        name: "",
        regiona: "",
        regionb: "",
        regionc: "",
        regiond: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        regioB: "",
        regioA: "",
      },
      sizeForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      // 	.then(_ => {
      // 		done();
      // 	})
      // 	.catch(_ => {});
    },

    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 240px;
  height: 50px;
  float: left;
}

.ipt_aa {
  width: 400px;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}

.listdizhi {
  width: 100%;
  height: 100px;
  float: left;
  border-bottom: 1px solid;
}

.lie {
  width: 90%;
  height: 100%;
  float: left;
}

.listdizhia {
  width: 100%;
  height: 50px;
  float: left;
}

.listdizhia div {
  float: left;
  margin-left: 30px;
}
</style>